<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Hzl
 * @LastEditTime: 2021-09-22 19:22:31
-->
<template>
<!-- 设置图表容器 -->
<!-- 如何在vue中设置dom节点 -->
  <div ref='root' style="height:150px">
    
  </div>
</template>

<script>
//从g2plot对象中引入折线图构造函数
import {Line} from '@antv/g2plot'

export default {
  data(){
    return{

    }
  },

  //dom节点创建完毕 但是没有挂载
  // created(){this.load()},

  //在onMounted之后执行  页面dom节点创建完毕 挂载完毕--获取dom
  mounted(){
    this.initCharts();
  },
  methods:{
    //封装图表方法
    initCharts(){
      //3.创建图表实例
      //let line = G2plot.Line;
                            // ref='root'
      let line = new Line(this.$refs['root'],{
        data:[
        { week: '第一周', value: 13 },
        { week: '第二周', value: 7 },
        { week: '第三周', value: 10 },
        { week: '第四周', value: 20 },
        ],
          //x轴展示的数据
          xField:'week',
          //y轴展示的数据
          yField:"value",
          color:"cyan",
      });
    //4.渲染
    line.render();
    }
  }
}
</script>

<style lang="scss">

</style>